<!--
 * 系统配置
-->
<template>
  <div class="system-config">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="60px">
      <div class="system-config__content">
        <el-divider content-position="left" class="system-config__title">消费者下单距离限制</el-divider>
        <div class="system-config__content--item">
          <el-form-item label="距离" prop="distance">
            <el-input v-model.number="ruleForm.distance" :min="0" placeholder="请输入距离">
              <template slot="suffix">公里</template>
            </el-input>
          </el-form-item>
        </div>
      </div>

      <!-- <div class="system-config__content">
        <el-divider content-position="left" class="system-config__title">系统基础信息配置</el-divider>
        <div class="system-config__content--item">
          <el-form-item label="logo" prop="logo">
            <el-upload :action="action" :file-list="fileList" :headers="headers" :limit="1" list-type="picture-card"
              :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError"
              :on-remove="handleRemove" :disabled="uploadLoading">
              <i class="el-icon-plus" v-loading="uploadLoading"></i>
            </el-upload>
            <p class="upload-tip">尺寸大小为 140px * 40px</p>
          </el-form-item>
        </div>

        <div class="system-config__content--item">
          <el-form-item label="系统名称" prop="name" label-width="80px">
            <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
          </el-form-item>
        </div>
      </div> -->
    </el-form>

    <div class="system-config__footer">
      <el-button type="primary" @click="handleSave('ruleForm')">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        distance: '',
        // logo: '',
        // name: '',
      },

      rules: {
        distance: [
          {
            type: 'number', required: true,
            message: '请输入距离',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (value <= 0) {
                callback(new Error('距离不能小于0'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        // logo: [{ required: true, message: '请上传logo', trigger: 'change' }],
        // name: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
      },

      // 上传图片相关配置
      uploadLoading: false,
      fileList: [],
      headers: {
        token: localStorage.getItem('token'),
      },
      action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const result = {
        distance: 10,
        logo: 'https://yundian-test.obs.cn-south-1.myhuaweicloud.com:443/2025%2F20250415%2F97b43d8c-222b-4101-a391-a7158c42cb0e.jpg',
      }

      this.ruleForm = { ...result };
      this.fileList = [{ url: result.logo }];
    },

    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    handleSuccess(res, file) {
      if (res.code == 1) {
        this.ruleForm.logo = res.result
      }
      this.uploadLoading = false;
    },
    handleError() {
      this.uploadLoading = false;
    },
    handleRemove(file, fileList) {
      this.ruleForm.logo = '';
    },
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功');
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.system-config {
  &__content {
    &:not(:last-child) {
      padding-bottom: 1px;
    }
    
    &--item {
      width: 500px;
      .upload-tip {
        color: #999;
      }
    }

    /deep/ .el-divider__text.is-left {
      color: #2b7dbc;
      font-size: 16px;
    }
  }

  &__footer {
    margin-top: 20px;
  }
}
</style>
